<template>
  <div class="app-container">
    <loading v-show="loading"></loading>
    <el-card class="box-card" style="margin-bottom:1%;">
      <div slot="header" class="clearfix">
        <span>试卷详细</span>
        <div class="btn-box">
        <el-button
              size="mini"
              type="primary"
              @click="$router.back(-1)" style="margin-right:20px;">返 回</el-button>
        </div>
      </div>
      <div class="text item">
        <el-form label-width="130px" disabled class="detailStyle">
          <el-row>
            <el-col :span="8">
              <span class="labelSpan">
                试卷名称:
              </span>
              <span class="valueSpan">
                {{detailData.name}}
              </span>
            </el-col>
            <el-col :span="8">
              <span class="labelSpan">
                考试时长:
              </span>
              <span class="valueSpan">
                {{detailData.lengthOfTime}}分钟
              </span>
            </el-col>
            <el-col :span="8">
              <el-form-item label="试题顺序:">
                <el-select v-model="detailData.questionOrder" style="width:100%;">
                  <el-option
                    v-for="item in orderList"
                    :key="item.paramValue"
                    :label="item.paramName"
                    :value="item.paramValue">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <span class="labelSpan">
                开考时间:
              </span>
              <span class="valueSpan">
                {{detailData.startTime}}
              </span>
            </el-col>
            <el-col :span="8">
              <span class="labelSpan">
                结束时间:
              </span>
              <span class="valueSpan">
                {{detailData.endTime}}
              </span>
            </el-col>
          </el-row>
          <el-row>
            <el-col style="display: flex;">
              <span class="labelSpan">
                备注:
              </span>
              <span class="valueSpan">
                {{detailData.description}}
              </span>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>
    <el-card class="box-card" style="margin-bottom:1%;">
      <span class="questionType" v-if="radioList.length">一，单选题</span>
      <div class="questionBox" v-for="(item,index) in radioList" :key="item.id" >
        <p class="questionDes">{{index+1}}，{{item.description}}</p>
        <p v-for="items in item.answers">
          <span class="questionNo">{{items.answersNo}}</span>
          <el-radio v-model="item.userAnswer" :label="items.answerValue"></el-radio>
        </p>
      </div>
      <span class="questionType" v-if="multiSelect.length">二，多选题</span>
      <div class="questionBox" v-for="(item,index) in multiSelect" :key="item.id" >
        <p class="questionDes">{{index+1}}，{{item.description}}</p>
        <p v-for="items in item.answers">
          <el-form>
            <el-form-item :label="items.answersNo" label-width="20px">
              <el-checkbox-group v-model="items.checkeds" size="mini">
                <el-checkbox  :label="items.answerValue"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-form>
        </p>
      </div>
      <span class="questionType" v-if="judgeList.length">三，判断题</span>
      <div class="questionBox" v-for="(item,index) in judgeList" :key="item.id" >
        <p class="questionDes">{{index+1}}，{{item.description}}</p>
        <p v-for="items in item.answers">
          <span  class="questionNo">{{items.answersNo}}</span>
          <el-radio v-model="item.userAnswer" :label="items.answerValue"></el-radio>
        </p>
      </div>
      <el-button type="primary"  @click="pushTest">交 卷</el-button>
    </el-card>
  </div>
</template>
<script>
import { getTest, testEnd } from '@/api/examManagement/testPage'
import Loading from '@/components/loading/loading'
export default {
  components: {
    Loading
  },
  data() {
    return {
      loading: false,
      searchData: {
        infoId: ''
      },
      orderList: [],
      detailData: {
        createBy: '',
        createTime: '',
        description: '',
        endTime: '',
        id: '',
        lengthOfTime: 1,
        modifyTime: '',
        name: '',
        passPercentage: 1,
        questionOrder: '',
        startTime: '',
        status: '',
        totalScore: 0
      },
      questionsList: [],
      radioList: [],
      multiSelect: [],
      judgeList: [],
      addData: {
        infoId: '',
        json: {
          data: [

          ]
        }
      },
      answered: false,
      answer: []
      // answersList: {
      //   id: '',
      //   userAnswer: ''
      // }
    }
  },
  created() {
    this.loading = true
    this.searchData.infoId = this.$route.query.infoId
    this.getTests()
  },
  methods: {
    getTests() {
      this.loading = true
      return new Promise((resolve, reject) => {
        getTest(this.searchData).then(response => {
          this.questionsList = response.data.questions
          this.detailData = response.data.entity
          console.log(this.detailData)
          this.orderList = response.data.questionOrder
          this.questionsList.forEach(element => {
            JSON.parse(element.answers)
          })
          this.questionsList.forEach(element => {
            if (element.type === '00A') {
              this.radioList.push(element)
            } else if (element.type === '00B') {
              this.multiSelect.push(element)
            } else {
              this.judgeList.push(element)
            }
          })

          this.radioList.forEach(element => {
            element.answers = JSON.parse(element.answers)
          })
          this.multiSelect.forEach(element => {
            element.answers = JSON.parse(element.answers)
            element.checkeds = []
          })
          this.judgeList.forEach(element => {
            element.answers = JSON.parse(element.answers)
          })
          resolve()
          this.loading = false
        }).catch(error => {
          this.loading = false
          reject(error)
        })
      })
    },
    pushTest() {
      this.addData.infoId = this.detailData.id
      this.radioList.forEach(element => {
        if (element.userAnswer && element.userAnswer !== undefined) {
          const value = element.answers.find(ele => ele.answerValue === element.userAnswer)
          this.addData.json.data.push(
            {
              id: element.id,
              userAnswer: value.answersNo
            }
          )
        } else {
          this.$message({
            message: '所有试题为必答题，请仔细完成每一道题',
            type: 'warning'
          })
        }
      })
      for (const index in this.multiSelect) {
        this.answer[index] = ''
        this.multiSelect[index].answers.forEach(ele => {
          if (ele.checkeds && ele.checkeds !== undefined) {
            this.answer[index] += ele.answersNo
          }
        })
        this.addData.json.data.push(
          {
            id: this.multiSelect[index].id,
            userAnswer: this.answer[index]
          }
        )
      }

      this.judgeList.forEach(element => {
        if (element.userAnswer && element.userAnswer !== undefined) {
          const value = element.answers.find(ele => ele.answerValue === element.userAnswer)
          this.addData.json.data.push(
            {
              id: element.id,
              userAnswer: value.answersNo
            }
          )
        } else {
          this.$message({
            message: '所有试题为必答题，请仔细完成每一道题',
            type: 'warning'
          })
        }
      })
      for (const index in this.addData.json.data) {
        if (this.addData.json.data[index].userAnswer !== '' && this.addData.json.data[index].userAnswer !== undefined) {
          // this.testEnding()
          this.answered = true
        } else {
          this.addData.json.data = []
          this.answered = false
          this.$message({
            message: '所有试题为必答题，请仔细完成每一道题',
            type: 'warning'
          })
          break
        }
      }
      if (this.answered) {
        this.testEnding()
      }
    },
    testEnding() {
      this.loading = true
      this.addData.json = JSON.stringify(this.addData.json)
      testEnd(this.addData).then(response => {
        this.loading = false
        this.addData.json = {
          data: []
        }
        this.$router.push({
          path: 'testList',
          name: '在线考试'
        })
      }).catch(error => {
        this.addData.json = JSON.parse(this.addData.json)
        this.loading = false
        console(error)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.questionBox{margin-bottom:30px;}
.questionBox p:nth-child(2){-webkit-margin-before: 0;}
.questionNo{font-weight: 700;color: #606266;font-size: 14px;display: inline-block;width:15px;}
.questionDes{-webkit-margin-after: 0;font-weight: 700;font-size: 14px;color: #333;line-height: 40px;padding: 0 12px 0 0;-webkit-box-sizing: border-box;box-sizing: border-box;}
</style>
